<template>
    <Dialog ref="tableDialog" :buttons="buttons" :dialogKey="dialogKey" title="编辑地图">
        <el-form ref="formRefs" :model="formRef" :rules="rules">
            <el-form-item label="地图图片" label-width="100" prop="imageStr">
                <FileUpload :key="showUploadKey" ref="uploadref" v-model="formRef.imageStr" :uploadFile="uploadFile">
                </FileUpload>
            </el-form-item>
            <el-form-item label="地图名称" required label-width="100" prop="picName">
                <el-input v-model="formRef.picName"></el-input>
            </el-form-item>
        </el-form>
    </Dialog>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { DialogButton } from '@/components/BasicPlugin/Dialog';
import { GetMap, API, EditNopicMap } from '@/api/business/space/map';
import { UserUploadFile } from '@/components/BasicPlugin/FileUpload';
import { syFormUtil } from '@/components/BasicForm';
//此参数必须写
const porpData = defineProps(['dialogKey', 'refresh'])
//如果事件需要关闭弹出层,则需要
const tableDialog = ref()
// 标识有没有上传过图片
const imgKey: any = ref(false)
//定义按钮事件组
const buttons = ref<DialogButton[]>([
    {
        title: '确定',
        event: function () {
            if(formRef.value.imageStr !== '') imgKey.value = true
            if (imgKey.value) {
                syFormUtil.saveFormForFileUpload(formRefs.value, event, () => {
                    uploadref.value.startUpload(formRef.value)
                    tableDialog.value.isShow = false

                })
            } else {
                EditNopicMap({
                    id: formRef.value.id,
                    picName: formRef.value.picName
                }, () => {
                    getMap()
                    porpData.refresh()
                    tableDialog.value.isShow = false
                })
            }

        },
    },
])

// 表单
const formRefs = ref()
const formRef = ref({
    id: '',
    picName: '',
    sort: 10,
    imageStr: '',
})

const rules: any = {
    imageStr: [
        // { required: true, message: '请上传地图图片', trigger: 'blur' },
    ],
    picName: [
        { required: true, message: '请输入地图名称', trigger: 'blur' },
    ],
}
// 修改图片
const uploadref = ref()
const showUploadKey = ref(0)
const uploadFile = ref<UserUploadFile>({
    acceptType: '.png,.jpg',
    uploadUrl: API.ADD_MAP_URL,
    deleteUrl: API.DEL_MAP_URL + '/' + formRef.value.id,
    downloadUrl: '',
    fileList: [],
    limit: 1,
    uploadTip: '',
    autoUpload: false,
    afterFuc: (res: any) => {
        if (res) {
            getMap()
            porpData.refresh()
        }
    }
})

// 获取默认地图图片
const getMap = async () => {
    const res: any = await GetMap();
    if (res.data !== '') {
        formRef.value.id = res.data.id
        formRef.value.picName = res.data.picName
        uploadFile.value.deleteUrl = API.DEL_MAP_URL + '/' + formRef.value.id
        uploadFile.value.fileList = [{
            url: 'data:image/png;base64,' + res.data.platPic,
            name: res.data.picName + '.png',
            id: res.data.id
        }]
        showUploadKey.value++
    } else {
        formRef.value.id = ''
        formRef.value.picName = ''
        uploadFile.value.fileList = []
        showUploadKey.value++
    }
}

onMounted(() => {
    getMap()
})
</script>

<style lang="scss" scoped>
:deep(.hidden-upload) {
    width: 100%;

    .el-upload-list {
        width: 100%;

        .el-upload-list__item {
            width: 100%;
        }
    }
}
</style>